<template>
  <div class="witness-page">
    <breadcrumb
      :bread-path-list="breadPathList"
      :last-bread-title="curLouCeng.name + '层图'"
      :show-back-btn-flag="false"
    >
      <div style="display: flex; flex: 1">
        <span
        @click="handleTabLouceng"
        v-if="isAdmin"
          style="color: #1890ff; background-color: #313d50; padding: 0px 4px; margin-left: 10px; border-radius: 4px;cursor: default;"
        >
          <i class="el-icon-sort"></i>
          切换楼层
        </span>
        <span style="margin-left: auto">
          <el-button  size="mini" type="primary" @click="handleNowRouteFn">
            <i class="icon-shenfen1 el-icon--left"></i>
            今日项目查询
          </el-button>
          <el-button size="mini" type="primary" @click="handleWorkRouteFn">
            <i class="icon-rili el-icon--left"></i>
            工作人员查询
          </el-button>
        </span>
      </div>
    </breadcrumb>
    <div class="witness-body">
      <div class="layout-header content-header">
        <div class="ui-title">
          所属项目:
          <el-select style="width:250px" :teleported="false" multiple class="dark-theme" v-model="form.bidIds" placeholder="请选择" size="mini" @change="handleChange">
            <el-option v-for="item in curLouCeng.xmList" :key="item.bidId" :label="item.bidName" :value="item.bidId"></el-option>
          </el-select>
        </div>
      </div>
      <div class="layout-body">
        <div class="title1_content" style="height: 50px;">
          <div>
            <span class="font18">{{curLouCeng.name}}专家实时定位</span>
          </div>
          <div style="margin-left: auto;display: flex;position: relative;">
            <div style="margin-right: 20px" @click="getPersonCount('rybq') ">人员标签 
              <svg class="iconfontSvg"     aria-hidden="true" >
                        <use xlink:href="#icon-rybq-" ></use>
              </svg>
         
            </div>
            <div style="margin-right: 20px" @click="getPersonCount('bsrs')">标室人数 
              <svg class="iconfontSvg"     aria-hidden="true" >
                        <use xlink:href="#icon-rstj" ></use>
              </svg>
            </div>
            <div v-if="floatRight === 'rybq'" style="position: absolute;" @dblclick="floatRight = null" class="floatRight">
                <div class="ui-title">榆林交易中心</div>
                <ul>
                  <li>在线标签合计：<span> </span></li>
                  <li v-for="(item,index) in personCountData.person" :key="index">{{item[0]}}：<span>{{ item[1] }}</span></li>
                </ul>
            </div>
            <div v-if="floatRight === 'bsrs'"  @dblclick="floatRight = null"  style="position: absolute;" class="floatRight2">
                <div class="ui-title">榆林交易中心</div>
                <ul>
                  <li>项目合计：<span style="color:#1890ff;text-align: left;">8</span></li>
                  <li>
                    <span></span>
                    <span>应到人数</span>
                    <span>实到人数</span>
                  </li>
                  <li v-for="(item,index) in personCountData.room" :key="index">
                    <span style="text-align: left;">{{ item[0] }}</span>
                    <span style="color:#1890ff;">{{ item[1] }}</span>
                    <span :style="{color:item[1] <item[2]?'#1890ff;':'red' }">{{ item[2] }}</span>
                  </li>
                 
                </ul>
            </div>
            <!-- <el-dropdown class="custom-dropdown" @command="handleDropdownClick"  >
              <el-button type="primary">
                <i class="icon-shenfen1 el-icon--left"></i>
                人员标签
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu  slot="dropdown">
                <el-dropdown-item v-for="(value,key,index) in personTypeList" :command="key" :key="index">{{ value }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown class="custom-dropdown" style="margin-left: 10px">
              <el-button type="primary">
                <i class="icon-shenfen1 el-icon--left"></i>
                标室人数
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>第二评标室6人</el-dropdown-item>
                <el-dropdown-item>第三评标室12人</el-dropdown-item>
                <el-dropdown-item>第四评标室20人</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </div>
        </div>
        <div style="height: 90%;width: 100%;overflow: hidden;background-color: #273243;margin-top: 6px;"> 
          <D3Tree ref="treeJScans" :onGetWanger="onGetWanger" />
        </div>
      </div>
      <div class="layout-footer ui-pt5">
        <ListCard ref="listCard">
          <div class="boxAllfooter" >
            <div
              v-for="(item, index) in trackAlarmList"
              class="boxAllitem"
              :style="{
                border: curItem.id === item.id ? '1px solid #a30026' : '',
                background: curItem.id === item.id ? '#193860' : ''
              }"
              :key="index"
              @click="handleSelect(item)"
            >
              <div class="boxAllitem_img">
                <img :src="curItem.id === item.id ? imgActive[0] : imgActive[1]" alt="" srcset="" />
              </div>
              <ul>
                <li>姓名：{{ item.personName }}</li>
                <li style="display: flex;">标段：<el-tooltip effect="light" :content="item.bidName " placement="top"> <p class="text-overflow">{{  item.bidName }}</p></el-tooltip></li>
                <li>时间：{{ item.alarmTime}}</li>
                <li>位置：{{ item.alarmAddress}}</li>
                <li style="display: flex">
                  <span>类型：{{ item.alarmName }}</span>
                  <el-button type="text" style="margin-left: auto; margin-top: -6px" @click="handleDetailClick(item)">
                    查看详情
                  </el-button>
                </li>
              </ul>
            </div>
          </div>
        </ListCard>
        <div class="lastBox" @click="handleGotoRight()"><i style="font-size: 16px; color: #fff" class="el-icon-arrow-right"></i></div>
      </div>
    </div>
    <DialogDetail :title="detailTitle" ref="DialogDetail" :visible.sync="dialogDetail"  />
  </div>
</template>
<script>
import D3Tree from "./components/proViewComponent.vue";
import ListCard from "./components/listCard.vue";
import DialogDetail from "./components/dialog_detail.vue";
import { listUnfinishedBid, trackListAlarm ,gtrackGetAlarm,personCount} from "@/api/pageLiveWitness"
export default {
  components: {
    ListCard,
    DialogDetail,
    D3Tree
  },
  data() {
    const personTypeList = {
      'ZJ': "评标专家",
      'JD': "甲方代表",
      'ZBDL': "招标代理",
      'GZRY': "工作人员"
      // 'GZRY': "工作人员"
    }
    return {
      isAdmin:false,
      FloorList:[],
      personCountData:{},
      curLouCeng:{},
      bidIds:[],
      form:{
        bidIds:[],
        personType:'',
        louceng:''
      },
      personTypeList,
      dialogDetail: false,
      detailTitle:'预警详情',
      breadPathList:[],
      value: "",
      floatRight:null,
      // options: [
      //   {
      //     label: "项目1",
      //     value: "1"
      //   },
      //   {
      //     label: "项目2",
      //     value: "2"
      //   }
      // ],
      trackAlarmList: [],
      canvasTrackAlarmList:new Map(),
      bidList:[], // 标段列表
      bidListBids:[],// 标段列表[id]
      peopleList:new Map(), //人员列表 
      curItem: {},
      imgActive: [require("@/assets/imgs/dp/active.png"), require("@/assets/imgs/dp/noactive.png")],
      subscribedUrlArr:[]
    };
  },
  watch: {
    wsData: {
      handler(newVal) {
        if (newVal) {
          if(this.$refs.treeJScans){
            const { data, type  } = newVal
            const bidId = data.bidId
            console.log(' this.bidList', this.bidList);
            
            if( this.bidList.indexOf(bidId) !==-1){
              if(type === 'alarm'){  // 来预警
                this.getAxiosDataYJpoint('add',data)
                this.$refs.treeJScans.handlePlay()
              }
              if(type === 'handle.alarm'){  // 预警处理 alarm.handle
                this.getAxiosDataYJpoint('remove',data)
              }
              if(type === 'location'){  // 人员移动
                this.getAxiosDataRYpoint('add',data)
              }
              if(type === 'uwb_unbind'){  // uwb卡解绑
                this.getAxiosDataRYpoint('remove',data)
              }
            }
          }
        }
      },
      immediate: true
    },
  },
  computed: {
    wsData() {
      return this.$websocket.getters.wsData;
    }
  },
 async mounted() {
   await this.handleListUnfinishedBid()
   await this.getTrackListAlarm()
    // this.getAxiosDataYJpoint();
    // this.getAxiosDataRYpoint();
    this.webSocketTaskFn()
  },
  methods: {
    // 切换楼层
    handleTabLouceng(){
      if(this.curLouCeng.name === '10楼'){
        this.curLouCeng = this.FloorList.F12
        this.form.bidIds = []
        this.bidList =  this.curLouCeng.bidList
        this.$refs["treeJScans"].handleTabsLouceng(this.curLouCeng.name);
        this.getTrackListAlarm()
        return 
      }
      if(this.curLouCeng.name === '12楼'){
        this.curLouCeng = this.FloorList.F10
        this.form.bidIds = []
        this.bidList =  this.curLouCeng.bidList
        this.$refs["treeJScans"].handleTabsLouceng(this.curLouCeng.name);
        this.getTrackListAlarm()
      }
      
    },
    // 获取右侧合计信息
    getPersonCount(val){
      if(val ===  this.floatRight ){
        this.floatRight = null
        return 
      }
      personCount().then(res=>{
        if(res.code === 0){
          this.personCountData = res.data
          this.floatRight = val
        }
      })
    },
      // 实时轨迹
    async webSocketTaskFn() {
      // const bidId =  '8a7286be92889c9e0192890d1ccf13e7'
      const arr = [ `/ws/witness/track`,]
      const wsUrl = `${process.env.VUE_APP_API}/stomp`; // 初始化地址
      this.$websocket.dispatch("websocket_init", wsUrl);
      arr.forEach(url => {
        if (this.subscribedUrlArr.indexOf(url) === -1) {
          this.$websocket.dispatch("websocket_subscribe", url);
          this.subscribedUrlArr.push(url);
        }
      })
    },
    //订阅id
    // 获取项目列表
   async handleListUnfinishedBid(){
   const result =  await listUnfinishedBid()
    if(result.code === 0){
      // 获取全部数据，如果有10层楼的项目和12 楼的项目 就是管理员
      const F10 = []
      const F12 = []
      const loucengArr = new Set()   // 10 12
      result.data.forEach(item=>{
        if(item.pbFloorName === '12'){
          F12.push(item)
        }
        if(item.pbFloorName === '10'){
          F10.push(item)
        }
        loucengArr.add( 'F' + item.pbFloorName)
      })
      const FloorList = {
        F10:{
          xmList:F10,
          name:'10楼',
          bidList:F10.map(x=>x.bidId)
        },
        F12:{
          xmList:F12,
          name:'12楼',
          bidList:F12.map(x=>x.bidId)
        }
      }
      this.FloorList = FloorList
      console.log(111);
      
      if(loucengArr.size > 1){
        // 如果是管理员，默认10层
        this.isAdmin = true
        this.curLouCeng =  this.FloorList.F10
      }else{
        // 如果不是管理员，看项目是不是统一的楼层，如果是统一的楼层，就固定楼层
        this.curLouCeng  = this.FloorList[Array.from(loucengArr)[0]]
        this.$refs["treeJScans"].handleTabsLouceng(this.curLouCeng.name);
      }
      if(this.form.bidIds.length === 0 ){
        // 如果没有选中项目，默认选择全部楼层,只有在这个标段，内socker才会接收数据
        this.bidList =  this.curLouCeng.bidList
      }

      
    }
    },
    handleDropdownClick(val){
      this.$set(this.form,'personType',val)
      this.getTrackListAlarm()
    },
    handleChange() {
       this.getTrackListAlarm()
    },
    // 获取预警列表
   async getTrackListAlarm(){
     let { bidIds,personType } = this.form
     if(bidIds.length === 0){
        bidIds = this.bidList
     }
      const params = {
        bidIds,
        personType,
      }
      const result = await trackListAlarm(params)
      if(result.code === 0){
        // 重置列表
        this.trackAlarmList = []
        // 清空画布
        this.$refs["treeJScans"]?.clearCanvas()
        for(const item of result.data){
          //  0 未处理 // -1 待处理  1 已处理
          if(item.status !== -1){
            this.trackAlarmList.push(item)
          }else{
            this.getAxiosDataYJpoint('add',item)
          }
        }
      }
    },
    onGetWanger({id}){
      gtrackGetAlarm(id).then(result=>{
        if(result.code === 0){
          this.$refs['DialogDetail'].setForm(result.data)
          this.detailTitle = '预警处理'
          this.dialogDetail  = true
        }
       
      })

  
    },
    handleGotoRight(){
      this.$refs['listCard'].scrollBy(250)
    },
    // 设置人员
    getAxiosDataRYpoint(xw,data) {
    // 评标专家 
    // 招标代理
    // 甲方代表 
        if(xw === 'add'){
          this.peopleList.set(data.personId,data)
          this.$refs["treeJScans"].setPeopleRadiusPoints(xw,data);
        }else{
          this.peopleList.delete(data.personId)
          this.$refs["treeJScans"].setPeopleRadiusPoints(xw,data);
        }  
    },
    //   设置预警点位并跟新预警画布
    getAxiosDataYJpoint(xw,data) {
      // xw add remove
      this.canvasTrackAlarmList.set(data.id,data)
  

      this.$refs["treeJScans"].setWangerRadiusPoints(xw,data);
    },
    handleDetailClick({ id }) {
      gtrackGetAlarm(id).then(result=>{
        if(result.code === 0){
          this.$refs['DialogDetail'].setForm(result.data)
          this.detailTitle = '预警详情'
          this.dialogDetail = true;
        }
       
      })
     
    },
    handleSelect(val) {
      this.curItem = val;
    },
    handleNowRouteFn(){
      this.$router.push({path:'/wintessquery/nowTrajectory'})
    },
    handleWorkRouteFn(){
      this.$router.push({path:'/wintessquery/staffTrajectory'})
    }
  }
};
</script>
<style scoped lang="scss">
$backBG: #2b333f;
$backCard: #193860;
.witness-page {
  background-color: #1d2637;
  box-sizing: border-box;
}
.witness-body {
  margin: 6px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #2d394e;
  color: #fff;
}
.layout-header.content-header {
  background-color: #3a475e;
  padding: 0 10px;
}

.layout-body{
  position: relative;
  margin-top: 10px;
  display: flex;
  align-items: center;
  background-color: #3a475e;
  flex-flow: column nowrap;
  padding: 10px;
  box-sizing: border-box;
  .title1_content {
    width: 100%;
    height: 60px;
    display: flex;
    padding: 0px 10px;
    box-sizing: border-box;
    align-items: center;
    background-color: #2a3545;
    justify-content: flex-start;
    cursor: default;
    .floatRight{
      padding: 4px 6px;
      top: 30px;
      right: 20px;
      width: 160px;
      height: 120px;
      background-color: #fff;
      z-index: 999;
      color: #1d2637;
      >ul{
        li{
          line-height: 20px;
        }
        span{
           font-size: 14px;
           color: #1890ff;
        }
      }
    }
    .floatRight2{
      padding: 4px 6px;
      top: 30px;
      right: 20px;
      width: 200px;
      background-color: #fff;
      z-index: 999;
      color: #1d2637;
      li{
        display: flex;
        span {
           width: 80px;

            display: inline-block;
            text-align: center;
            font-size: 12px;
        };
      }
    }
  }
  // .box_3d{
  //   margin-top: 10px;
  //   width: 100%;
  //   height: 100%;
  //   // flex: 1;
  //   background-color: #273243;
  // }
}
.layout-footer {
  height: 170px;
  display: flex;
  padding: 0 10px;
  background-color: hsl(218, 24%, 30%);
  text-align: left;
}
.boxAllfooter {
  //padding: 4px 10px;
  display: flex;
  flex-flow: nowrap row;
}
.boxAllitem {
  position: relative;
  width: 250px;
  box-sizing: border-box;
  background-color: #2b3a51;
  margin-right: 8px;
  color: #fff;
  padding: 10px;
  border: 1px solid $backCard;
  font-size: 12px;
  .boxAllitem_img {
    width: 34px;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
    //background-color: #00c6ff;
    img {
      width: 100%;
      height: auto;
    }
  }
  li {
    line-height: 26px;
  }
}
.lastBox {
  // margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  // box-sizing: border-box;
  // padding: 10px 0px;
  width: 40px;
  margin-bottom: 18px;
  // border-left: 20px solid $backBG;
  background-color: #2b3a51;
}
.el-icon-sort {
  transform: rotateZ(90deg);
}
.Breadcrumb {
  background-color: #364860;
  border-top: 1px solid #667a95;
  ::v-deep .el-breadcrumb__inner {
    color: #fff;
  }
}
.dark-theme{
::v-deep .el-input__inner {
  border-color: #364860;
  height: 32px;
  background-color:#2A3950;
}
} 

.custom-dropdown {
  ::v-deep .el-button--primary {
   background: #232d3b;
   border: 1px solid #232d3b;
   color:#1890ff;
}

}
.text-overflow {
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 隐藏超出的内容 */
      text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
      max-width: 200px; /* 设置最大宽度以限制文本的显示长度 */
    }
.iconfontSvg{
  // color: #fff;
  width: 14px;
  height: 14px;
  fill: #fff;
}
</style>

